import React from 'react'
import './addNewAcc.scss'
import AreaData from "../../../component/areaData/areaData"
import utils from '../../../utils/utils'
import cookie from 'react-cookies'
import moment from 'moment'
import { List, Tabs, Row, Col,Select,DatePicker,Table,Radio,Button,Input,Card,Image,Descriptions,Switch ,message,Checkbox} from 'antd';
import BreadcrumbNav from '../../../component/breadcrumb/breadcrumb'
import { EditOutlined, DeleteOutlined ,SettingOutlined,LoadingOutlined, PlusOutlined ,UploadOutlined} from '@ant-design/icons';
import {getUserPositionInfo,addUserAndAuthority,updUserAndAuthority,getAllAccounnt} from '../../../api/accountManage'
import {getDepartmentList,getPositionByDepartId} from '../../../api/account'
import {getProjectInfo} from '../../../api/hardwareCenter'

const { Option } = Select;
const { Column } = Table;
const CheckboxGroup = Checkbox.Group;
class addNewAcc extends React.Component{
    constructor(props){
        super(props)
        this.state = {
        dataSource : [
            
            ],
        
            depart_id:'',
            position_id:'',
            partData:[],
            positionData:[],
            user_name:'',
            user_phone:'',
            plainOptions : [],//多选框选项
            checkedList:[],//选中的
            indeterminate:true,
            checkAll:false,
            arr:[]
            
        }
    }

    componentDidMount(){
        this.getDepartmentList()
        this.getProjectInfo()
    }
    // 新建用户-获取部门
    getDepartmentList = () => {
        let post_data = {
            auth_token:cookie.load('station_console_setting_web_login').auth_token
        }
        getDepartmentList(post_data).then(res => {
            if(res.code == 0){
               this.setState({
                   partData:res.data
               })
            }
        })
    }
    // 选中岗位
    selected = (val) => {
        console.log(val,'parttt')
        this.setState({
            depart_id:val.value,
            depart_name:val.label
        },()=>{
            let post_data = {
                auth_token:cookie.load('station_console_setting_web_login').auth_token,
                depart_id:this.state.depart_id
            }
            getPositionByDepartId(post_data).then(res => {
                if(res.code == 0){
                    this.setState({
                        positionData:res.data
                    })
                }
            })
        })
        
    }
    // 选中部门
    selected2 = (val) => {
        console.log(val,'posss')
       
        this.setState({
            position_id:val.value,
            position_name:val.label
        })
        
    }
    // 
    nameIpt = (e) => {

        this.setState({
            user_name:e.target.value
        })
    }
    // 
    phoneIpt = (e) => {
        this.setState({
            user_phone:e.target.value
        })
    }
    // 全部项目
    getProjectInfo = () => {
        let post_data = {
            auth_token:cookie.load('station_console_setting_web_login').auth_token,
            state:'2'
        }
        getProjectInfo(post_data).then(res => {
            console.log(res)

            if(res.code == 0){
                
                res.data.map((item,index)=> {
                  
                   this.state.arr.push({label:item.id,name:item.project_name})
                })
                this.setState({
                    plainOptions: this.state.arr
                })
            }
        })
    }
    // 多选框
    onChangeMore = list => {
        this.setState({
            checkedList:list,
            indeterminate:!!list.length && list.length < this.state.plainOptions.length,
            checkAll:list.length === this.state.plainOptions.length
        },()=> {
            console.log(this.state.checkedList,this.state.checkAll)
        // setCheckedList(list);
        // setIndeterminate(!!list.length && list.length < plainOptions.length);
        // setCheckAll(list.length === plainOptions.length);
        })
        
    };
    // 全选
    onCheckAllChange = e => {
        console.log(e.target.checked )
        this.setState({
            checkedList:e.target.checked ? this.state.plainOptions : [],
            indeterminate:false,
            checkAll:e.target.checked
        })
        // setCheckedList(e.target.checked ? plainOptions : []);
        // setIndeterminate(false);
        // setCheckAll(e.target.checked);
    };
   
    // 返回
    toBefore = () => {
        window.location.href='/index/auther/autherAccount'
    }

    // 提交
    submit = () => {
        console.log(this.state.user_phone,this.state.user_name,this.state.checkedList,this.state.depart_id,this.state.position_id)
        if(!this.state.user_name || !this.state.user_phone){
            message.error('请输入账户名称或者电话号码！');
            return false
        }
        if ( !utils.isMobile(this.state.user_phone)) {
            message.error('请输入正确格式的电话号码！');
            return false
        } 
        if(!this.state.position_id || !this.state.depart_id){
            message.error('请选择对应的部门岗位！');
            return false
        }
        if(this.state.checkedList.length == 0 ){
            message.error('请选择对应的项目！');
            return false
        }
        let post_data={
            'auth_token':cookie.load('station_console_setting_web_login').auth_token,
            'user_name':this.state.user_name,
            'user_phone':this.state.user_phone,
            'project_id':this.state.checkedList.join(","),
            'depart_name':this.state.depart_name,
            'position_name':this.state.position_name,
            'position_id':this.state.position_id,
            
        } 
        console.log(post_data)
        addUserAndAuthority(post_data).then(res => {
            if(res.code ==0){
                message.success('新建用户成功',2,()=> {
                    window.location.href='/index/auther/autherAccount'
                })
                console.log(res)
            }
        })
        // 
    }

    

    // 点击单选按钮
   

    render(){
        const {dataSource,project_id,witchPro,user_name,user_phone,position_id,partData,positionData,plainOptions,indeterminate,checkAll,checkedList,depart_id} = this.state
        return (
            <div id="ContentMainList" className="addNewAcc-con">
                <Row>
                    <Col span={24}>
                        <BreadcrumbNav />
                    </Col>
                    <Col span={24}>
                    <div className="tipss">
                        <span className="blue"></span>
                        <span>账号创建</span>
                        
                    </div>
                    </Col>
                    <Col span={12} style={{margin:'10px'}}>
                        <span className="label">账号姓名：</span><Input value={user_name} style={{width:'200px'}} placeholder="请输入账号姓名" onChange={this.nameIpt.bind(this)} />
                    </Col>
                    <Col span={10} style={{margin:'10px'}}>
                        <span className="label">手机号码：</span><Input value={user_phone} style={{width:'200px'}} placeholder="请输入手机号码" onChange={this.phoneIpt.bind(this)}/>
                    </Col>
                    <Col span={24} style={{margin:'10px'}}>
                        <span className="label">负责项目：</span>
                        {/* <Checkbox indeterminate={indeterminate} onChange={this.onCheckAllChange.bind(this)} checked={checkAll}>
                            全选
                        </Checkbox> */}
                        {/* <CheckboxGroup options={plainOptions} value={checkedList} onChange={this.onChange.bind(this)} /> */}
                        <Checkbox.Group style={{ width: '100%' }} onChange={this.onChangeMore.bind(this)}>
                            <Row>
                                {
                                    plainOptions.map((item,index) => (
                                        <Col style={{margin:'10px',marginLeft:'20px'}} span={4}>
                                            <Checkbox value={item.label}>{item.name}</Checkbox>
                                        </Col>
                                    ))
                                }
                            
                            </Row>
                    </Checkbox.Group>
                               
                    </Col>
                    <Col span={12} style={{margin:'10px'}}>
                        <span className="label">所属部门：</span>
                        <Select  size="small" placeholder="请选择用户所属部门" labelInValue allowClear onChange={this.selected.bind(this)}>
                            {/* <Option value="12">设备新增</Option>
                            <Option value="22">设备维护</Option>
                            <Option value="32">设备删除</Option>
                            <Option value="42">工单新增</Option> */}
                            {partData.map( (item,index) => 
                                <Option value= {item.id} >{item.name}</Option>
                            )}
                        </Select>
                    </Col>
                    <Col span={10} style={{margin:'10px'}}>
                        <span className="label">岗位职务</span>
                        <Select  size="small" placeholder="请选择用户所属部门" labelInValue  allowClear onChange={this.selected2.bind(this)}>
                            {positionData.map( (item,index) => 
                                <Option value= {item.id} >{item.name}</Option>
                            )}
                        </Select>
                    </Col>
                    <Col span={24} style={{margin:'10px'}}>
                        <span className="tips">系统功能模块权限：（请先选择员工所属部门及岗位/职务，系统将进行自动匹配）</span>
                        
                    </Col>
                    <Col span={24} style={{margin:'110px'}}>
                        <Button type="primary" onClick={this.toBefore.bind(this)} style={{width:'100px',height:'40px',marginRight:'30px',marginLeft:'400px'}}>
                            返回
                        </Button>
                        <Button type="primary" onClick={this.submit.bind(this)} style={{width:'100px',height:'40px',marginRight:'30px'}}>
                            提交
                        </Button>
                    </Col>

                </Row>
            </div>
        )
    }
}

export default addNewAcc